<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
  <meta charset="UTF-8">
  <title>demo-snippet tests</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
  <script src="../../web-component-tester/browser.js"></script>
  <link rel="import" href="../demo-snippet.html">
  <script src="../../iron-test-helpers/test-helpers.js"></script>
  <link rel="import" href="../../paper-checkbox/paper-checkbox.html">

</head>
<body>
  <!--
    *** Important! ***
    You'll notice that these tests don't use test-fixture. That's because
    there's a problem stamping nested templates in IE/Safari 8. This
    should eventually be patched in webcomponents.js, but in the meantime
    we're going to run these tests "the old way".

    This is relevant because this means that you, as the test writer,
    need to remember that an element's state is maintained between tests.
    If you don't want this, either use a new element, or clean up after
    your test.
  -->

  <demo-snippet id="emptyDemo"></demo-snippet>

  <demo-snippet id="nativeDemo">
    <template>
      <input disabled>
    </template>
  </demo-snippet>

  <demo-snippet id="customDemo">
    <template>
      <paper-checkbox disabled></paper-checkbox>
    </template>
  </demo-snippet>

  <demo-snippet id="demoWithAttributes">
    <template>
      <input disabled type="date">
    </template>
  </demo-snippet>

  <demo-snippet id="typeExtensionDemo">
    <template is="dom-bind">
      <paper-checkbox checked="{{checked}}"></paper-checkbox>
      <input value="[[checked]]">
    </template>
  </demo-snippet>

  <script>
    suite('display', function() {
      var emptyHeight;

      setup(function() {
        var emptyDemo = document.getElementById('emptyDemo');
        emptyHeight = emptyDemo.getBoundingClientRect().height;
      });

      test('can render native elements', function() {
        var element = document.getElementById('nativeDemo');

        // Render the distributed children.
        Polymer.dom.flush();

        var rect = element.getBoundingClientRect();

        expect(rect.height).to.be.greaterThan(emptyHeight);

        // The demo is rendered in the light dom, so it should exist, and
        // it should respect the demo element's attributes, and not make up
        // new ones.
        var input = Polymer.dom(element).querySelector('input')
        expect(input).to.be.ok;
        expect(input.disabled).to.be.true;
        expect(input.checked).to.be.false;

        var markdownElement = element.$.marked;
        expect(markdownElement.markdown).to.be.equal('```\n\n<input disabled>\n\n```');
      });

      test('can render custom elements', function() {
        var element = document.getElementById('customDemo');

        // Render the distributed children.
        Polymer.dom.flush();

        var rect = element.getBoundingClientRect();

        expect(rect.height).to.be.greaterThan(emptyHeight);

        // The demo is rendered in the light dom, so it should exist, and
        // it should respect the demo element's attributes, and not make up
        // new ones.
        var checkbox = Polymer.dom(element).querySelector('paper-checkbox')
        expect(checkbox).to.be.ok;
        expect(checkbox.disabled).to.be.true;
        expect(checkbox.checked).to.be.false;

        var markdownElement = element.$.marked;
        expect(markdownElement.markdown).to.be.equal(
            '```\n\n<paper-checkbox disabled></paper-checkbox>\n\n```');
      });

      test('elements are only rendered once when using a custom type-extension', function() {
        var element = document.getElementById('typeExtensionDemo');

        // Render the distributed children.
        Polymer.dom.flush();

        var inputs = element.querySelectorAll('input');
        expect(inputs.length).to.be.equal(1);
      });

      test('can support databinding between elements', function(done) {
        var element = document.getElementById('typeExtensionDemo');
        var input = Polymer.dom(element).querySelector('input');
        var checkbox = Polymer.dom(element).querySelector('paper-checkbox')

        // Render the distributed children.
        Polymer.dom.flush();

        checkbox.set('checked', true);

        flush(function() {
          expect(checkbox.checked).to.be.equal(true);
          expect(input.value).to.be.equal('true');
          done();
        });
      });
    });

    suite('parsing', function() {
      test('preserves attributes', function() {
        var element = document.getElementById('demoWithAttributes');

        // Render the distributed children.
        Polymer.dom.flush();

        var markdownElement = element.$.marked;
        expect(markdownElement.markdown).to.be.equal(
            '```\n\n<input disabled type="date">\n\n```');
      });
    });
  </script>
</body>
</html>
